<script setup lang="ts">
import { computed, inject } from "vue";
import { showImagePreview } from "vant";
import CellGroup from "@/components/CellGroup/index.vue";
import { APPROVE_TYPE_DETAIL_API_MAP } from "../constants";
import { ProcessTypeEnum } from "@/views/approveList/constants";

const item = APPROVE_TYPE_DETAIL_API_MAP[ProcessTypeEnum.STAMP];
const detail = inject("detail") as any;

/** 附件 */
const attachmentArray = computed(() => {
	return !!detail.value.attachment ? detail.value.attachment.split(",") : [];
});

const previewImage = (url: string) => {
	showImagePreview(["/mio-cdn" + url]);
};
</script>

<template>
	<CellGroup :mapList="item.detailMap" :detail="detail">
		<template #title>
			{{ item.title }}
		</template>
		<!-- <template #status v-if="detail.status">
			<van-tag class="tag" size="medium" :type="ApprovalStatusMap[detail.status as ApprovalStatusEnum].tagType as TagType">
				{{ ApprovalStatusMap[detail.status as ApprovalStatusEnum].text }}</van-tag
			>
		</template> -->
		<template #attachmentPath>
			<ul class="attachment-list" v-if="attachmentArray.length">
				<li class="van-ellipsis" v-for="(url, idx) in attachmentArray" :key="idx">
					<span>{{ url.split("/")[url.split("/").length - 1] }}</span>
				</li>
			</ul>
			<span v-else>-</span>
		</template>
		<template #imagePath>
			<div v-if="detail['imagePath'] && detail['imagePath'].split(',')">
				<img
					class="picture"
					v-for="(url, idx) in detail['imagePath'].split(',')"
					:key="idx"
					:src="'/mio-cdn' + url"
					@click="previewImage(url)"
				/>
			</div>
			<span v-else>-</span>
		</template>
	</CellGroup>
</template>

<style scoped lang="less">
.picture {
	width: 50px;
	height: 50px;
	object-fit: cover;
}
.attachment-list li span:active {
	background-color: #f7f7f7;
}

:deep(.van-cell) {
	.van-cell__title {
		width: 115px;
		flex: auto;
		flex-grow: 0;
		flex-shrink: 0;
	}

	.van-cell__value {
		white-space: pre-wrap;
		text-align: left;
	}
}
</style>
